<template>
    <div>
        <el-select v-model="modelValue.variableValue"
                   :placeholder="propJson.placeHolder"
                   :style="execClass"
                   :size="propJson.size"
                   :clearable="propJson.isClearable"
                   :info="selectOption"
                   :disabled="propJson.isDisable"
                   :filterable="propJson.isFilterable"
                   :multiple="propJson.isMultiple"
                   :collapse-tags="propJson.isMultiple && propJson.isCollapseTags"
                   :collapse-tags-tooltip="propJson.isMultiple && propJson.isCollapseTags && propJson.isCollapseTagsTooltip"
                   :max-collapse-tags="propJson.isMultiple && propJson.isCollapseTags ? propJson.maxCollapseTags : ''"
                   @click="selectClick()"
                   @change="selectChange()">
            <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
            />
        </el-select>
    </div>
</template>

<script>
import {getCommonParamObj} from "@/utils/commonParamUtil";
import jsonpath from "jsonpath";
import {doThirdServiceAction, doThirdServiceValue} from "@/request/lowcode/thirdService";

export default {
    name: "SelectComponent",
    props: ['propJson', 'commonParam'],
    data() {
        return {
            options: []
        }
    },
    methods: {
        execThen(resValue) {
            // 根据返回的结果解析label和value
            let optionsList = []
            for (let i = 0; i < resValue.length; i++) {
                let op = {label: "", value: ""}
                let info = resValue[i]
                let opLabel = jsonpath.query(info, this.propJson.optionLabel)
                let opValue = jsonpath.query(info, this.propJson.optionValue)
                if (opLabel.length > 0 && opValue.length > 0) {
                    op.label = opLabel[0]
                    op.value = opValue[0]
                    optionsList.push(op)
                }
            }
            this.options = optionsList
        },
        execCatch(resValue) {

        },
        execChangeThen(awaitObj) {
            // 判断是否需要在下拉改变后重新加载页面
            if (this.propJson.isReloadPage && awaitObj.res) {
                this.$router.go(0)
            }
        },
        async selectChange() {
            if (!this.propJson.isAddChangeAction) {
                return;
            }
            // 定义一个标志位，后续同步执行
            let awaitObj = {flag: false, res: true}
            await doThirdServiceAction(this.propJson.changeAction, awaitObj, this.commonParam, this.execChangeThen, ()=>{}, awaitObj);
        },
        async selectClick() {
            if (this.propJson.editFlag) {
                return;
            }
            if (!this.propJson.isClickAction) {
                return;
            }
            await doThirdServiceValue(this.propJson.actionInfo, this.commonParam, this.execThen, this.execCatch, null)
        }
    },
    computed: {
        execClass() {
            let resStyle = "width: 100%;"
            if (this.propJson.editFlag) {
                resStyle += "pointer-events: none;";
            }
            return resStyle;
        },
        modelValue() {
            let bindVariable= this.propJson.bindVariable;
            // 获取全局变量中的值
            return getCommonParamObj(this.commonParam, bindVariable)
        },
        async selectOption() {
            if (this.propJson.editFlag) {
                return;
            }
            if (this.propJson.isClickAction) {
                return;
            }
            await doThirdServiceValue(this.propJson.actionInfo, this.commonParam, this.execThen, this.execCatch, null)
        }
    }
}
</script>

<style scoped lang="less">

</style>